/*
 * @Author: Zhengxuan Ye
 * @Date: 2025-05-06 21:27:17
 * @Last Modified by:   Zhengxuan Ye
 * @Last Modified time: 2025-05-06 21:27:17
 */

<template>
  <div class="home">
    <!-- 轮播图/Banner部分 -->
    <section class="hero-section dunhuang-banner">
      <div class="hero-slider">
        <div class="hero-content">
          <h1>{{ banners[currentBanner].title }}</h1>
          <p>非物质文化遗产是民族智慧的结晶，是历史文明的瑰宝</p>
        </div>
        <div class="hero-image">
          <img :src="banners[currentBanner].image" :alt="banners[currentBanner].title" />
          <div class="image-source">素材来源于中国非物质文化遗产网</div>
        </div>
      </div>
      <!-- 轮播图指示器 -->
      <div class="banner-indicators">
        <span
          v-for="(banner, index) in banners"
          :key="banner.id"
          :class="['indicator', { active: currentBanner === index }]"
          @click="currentBanner = index"
        ></span>
      </div>
    </section>

    <!-- 遗产分类部分 -->
    <section class="category-section section">
      <div class="container">
        <h2 class="section-title">非遗分类</h2>
        <div class="category-grid">
          <div v-for="category in categories" :key="category.id" class="category-card">
            <div class="category-image">
              <img :src="category.image" :alt="category.name" />
              <div class="image-source">素材来源于{{ category.source }}</div>
            </div>
            <h3>{{ category.name }}</h3>
            <p>{{ category.description }}</p>
            <router-link :to="`/heritage-list?category=${category.id}`" class="category-link"
              >查看更多</router-link
            >
          </div>
        </div>
      </div>
    </section>

    <!-- 精选非遗项目部分 -->
    <section class="featured-section section">
      <div class="container">
        <h2 class="section-title">精选非遗项目</h2>
        <div class="featured-grid">
          <div v-for="item in featuredItems" :key="item.id" class="featured-card">
            <div class="featured-image">
              <img :src="item.image" :alt="item.name" />
              <div class="image-source">素材来源于中国非物质文化遗产网</div>
            </div>
            <div class="featured-content">
              <h3>{{ item.name }}</h3>
              <p class="featured-location">{{ item.location }}</p>
              <p class="featured-desc">{{ item.description }}</p>
              <router-link :to="item.routePath" class="btn btn-primary">了解详情</router-link>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 最新活动部分 -->
    <section class="events-section section">
      <div class="container">
        <h2 class="section-title">最新活动与展览</h2>
        <div class="events-grid">
          <div v-for="event in events" :key="event.id" class="event-card">
            <div class="event-image">
              <img :src="event.image" :alt="event.title" />
              <div class="image-source">素材来源于中国非物质文化遗产网</div>
            </div>
            <div class="event-content">
              <div class="event-date">{{ event.date }}</div>
              <h3>{{ event.title }}</h3>
              <p>{{ event.description }}</p>
              <div class="event-location">
                <span class="icon">📍</span>
                {{ event.location }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 数据统计部分 -->
    <section class="stats-section">
      <div class="container">
        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-number">1372</div>
            <div class="stat-title">国家级非遗项目</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">40</div>
            <div class="stat-title">入选联合国名录项目</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">3000+</div>
            <div class="stat-title">非遗传承人</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">31</div>
            <div class="stat-title">涵盖省市自治区</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 订阅部分 -->
    <section class="subscribe-section section dunhuang-subscribe">
      <div class="container">
        <div class="subscribe-content">
          <h2>订阅非遗资讯</h2>
          <p>获取最新的非物质文化遗产相关活动、政策和新闻</p>
          <form @submit.prevent="handleSubscribe" class="subscribe-form">
            <input type="email" v-model="subscribeEmail" placeholder="请输入您的邮箱" required />
            <button type="submit" class="btn btn-primary">订阅</button>
          </form>
          <p v-if="subscribeMessage" class="subscribe-message">{{ subscribeMessage }}</p>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import display1 from '../assets/display/pic1.jpg'
import display2 from '../assets/display/pic2.jpg'
import display3 from '../assets/display/pic3.jpg'
import display4 from '../assets/display/pic4.jpg'
import display5 from '../assets/display/pic5.JPG'
import display11 from '../assets/display/pic11.jpg'
import pic1 from '../assets/banner/pic1.jpg'
import pic2 from '../assets/banner/pic2.jpg'
import pic3 from '../assets/banner/pic3.jpg'
import pic4 from '../assets/banner/pic4.jpg'
import activity1 from '../assets/activity/pic1.jpg'
import activity2 from '../assets/activity/pic2.jpg'
import activity3 from '../assets/activity/pic3.png'

export default {
  name: 'HomeView',
  setup() {
    // 订阅邮箱和消息
    const subscribeEmail = ref('')
    const subscribeMessage = ref('')

    // 处理订阅
    const handleSubscribe = () => {
      // 实际应用中应该调用API保存邮箱
      subscribeMessage.value = '感谢您的订阅！'
      subscribeEmail.value = ''

      // 3秒后清除消息
      setTimeout(() => {
        subscribeMessage.value = ''
      }, 3000)
    }

    // 轮播图数据
    const banners = [
      { id: 1, image: pic1, title: '传承中华文明 守护非物质文化遗产' },
      { id: 2, image: pic2, title: '非物质文化遗产是民族智慧的结晶' },
      { id: 3, image: pic3, title: '历史文明的瑰宝' },
      { id: 4, image: pic4, title: '守护非遗 传承文化' },
    ]

    const currentBanner = ref(0)

    // 自动轮播
    const startAutoPlay = () => {
      setInterval(() => {
        currentBanner.value = (currentBanner.value + 1) % banners.length
      }, 5000)
    }

    // 组件挂载后开始自动轮播
    onMounted(() => {
      startAutoPlay()
    })

    // 模拟的非遗分类数据
    const categories = [
      {
        id: 1,
        name: '传统技艺',
        description: '包括景泰蓝、苏绣、广绣、蜀锦等传统手工技艺、制作工艺',
        image: display1, // pic1 - 景泰蓝
        source: '中国非物质文化遗产网',
      },
      {
        id: 2,
        name: '传统戏剧',
        description: '包括京剧、黄梅戏、昆曲、皮影戏等传统戏曲艺术',
        image: display3, // pic3 - 京剧
        source: '中国非物质文化遗产网',
      },
      {
        id: 3,
        name: '民俗',
        description: '包括福建土楼、傣族泼水节等传统建筑与节庆活动',
        image: display5, // pic5 - 福建土楼
        source: '维基百科',
      },
      {
        id: 4,
        name: '传统医药',
        description: '包括藏医药浴等传统医疗技艺与知识',
        image: display11, // pic11 - 藏医药浴
        source: '中国非物质文化遗产网',
      },
    ]

    // 模拟的精选非遗项目数据
    const featuredItems = [
      {
        id: 101,
        name: '景泰蓝制作技艺',
        location: '北京',
        description:
          '景泰蓝是中国传统的金属工艺品，以铜胎掐丝，填充色釉，经过烧制形成的工艺品，具有悠久的历史。',
        image: display1, // pic1 - 景泰蓝
        routePath: '/featured/jing-tai-lan',
      },
      {
        id: 102,
        name: '苏州刺绣',
        location: '江苏苏州',
        description: '苏绣以其精细的针法、色彩典雅、图案秀丽闻名于世，被誉为"中国四大名绣"之一。',
        image: display2, // pic2 - 苏州刺绣
        routePath: '/featured/su-zhou-embroidery',
      },
      {
        id: 103,
        name: '京剧',
        location: '北京',
        description:
          '京剧是中国国粹，融合了唱、念、做、打等艺术表现形式，具有丰富的文化内涵和艺术魅力。',
        image: display3, // pic3 - 京剧
        routePath: '/featured/peking-opera',
      },
      {
        id: 104,
        name: '黄梅戏',
        location: '安徽',
        description: '黄梅戏是中国五大戏曲剧种之一，以通俗易懂、贴近生活的表演风格深受观众喜爱。',
        image: display4, // pic4 - 黄梅戏
        routePath: '/featured/huang-mei-opera',
      },
    ]

    // 模拟的活动数据
    const events = [
      {
        id: 201,
        title: '2023中国非物质文化遗产博览会',
        date: '2023年6月10日-15日',
        location: '北京国家会议中心',
        description: '本次博览会将展示来自全国各地的非遗项目，包括现场表演、工艺品展示和互动体验。',
        image: activity1,
      },
      {
        id: 202,
        title: '传统工艺振兴计划成果展',
        date: '2023年7月1日-30日',
        location: '上海工艺美术博物馆',
        description: '展示近年来传统工艺振兴计划的成果，包括多位工艺大师的代表作品。',
        image: activity2,
      },
      {
        id: 203,
        title: '非遗进校园系列活动',
        date: '2023年9月-12月',
        location: '全国多所学校',
        description: '将非遗项目带入校园，让学生们近距离接触和了解中国传统文化。',
        image: activity3,
      },
    ]

    return {
      categories,
      featuredItems,
      events,
      subscribeEmail,
      subscribeMessage,
      handleSubscribe,
      banners,
      currentBanner,
    }
  },
}
</script>

<style scoped>
.section {
  padding: 60px 0;
  width: 100%;
  max-width: 100%;
}

.section-title {
  text-align: center;
  margin-bottom: 40px;
  color: var(--primary-color);
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
  font-size: 2rem;
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background-color: var(--primary-color);
  margin: 15px auto 0;
  background-image: linear-gradient(to right, var(--primary-color), var(--secondary-color));
}

/* 英雄/Banner部分 */
.hero-section {
  height: 80vh;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.dunhuang-banner {
  background-color: var(--bg-color);
  border-bottom: 3px solid var(--primary-color);
}

.hero-slider {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  background-color: rgba(139, 69, 19, 0.7);
  color: var(--light-color);
  position: relative;
  z-index: 1;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-content p {
  font-size: 1.4rem;
  margin-bottom: 30px;
  max-width: 800px;
}

.hero-image {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.image-source {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.9rem;
  z-index: 2;
}

.banner-indicators {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 2;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background-color: white;
  transform: scale(1.2);
}

/* 按钮样式 */
.btn {
  display: inline-block;
  padding: 10px 25px;
  border-radius: var(--border-radius);
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}

.btn-primary {
  background-color: var(--primary-color);
  color: white;
  border: 2px solid var(--primary-color);
}

.btn-primary:hover {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.btn-outline {
  background-color: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.btn-outline:hover {
  background-color: var(--primary-color);
  color: white;
}

/* 分类部分 */
.category-section {
  background-color: var(--light-color);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
}

.category-image {
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.category-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.category-card:hover .category-image img {
  transform: scale(1.05);
}

.category-image .image-source {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  z-index: 2;
}

.category-card {
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  overflow: hidden;
  transition: var(--transition);
  border: 1px solid rgba(184, 134, 11, 0.2);
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(139, 69, 19, 0.2);
  border-color: var(--primary-color);
}

.category-card h3 {
  font-size: 1.3rem;
  margin: 15px;
  color: var(--dark-color);
}

.category-card p {
  margin: 0 15px 15px;
  color: #666;
  line-height: 1.6;
}

.category-link {
  display: block;
  margin: 15px;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: bold;
  text-align: right;
}

.category-link:hover {
  text-decoration: underline;
}

/* 精选项目部分 */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
  gap: 30px;
}

.featured-card {
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  overflow: hidden;
  transition: var(--transition);
  border: 1px solid rgba(184, 134, 11, 0.2);
}

.featured-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(139, 69, 19, 0.2);
}

.featured-image {
  height: 300px;
  position: relative;
  overflow: hidden;
}

.featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.featured-card:hover .featured-image img {
  transform: scale(1.05);
}

.featured-image .image-source {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  z-index: 2;
}

.featured-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.featured-content h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  color: var(--accent-color);
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
}

.featured-location {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 10px;
  font-weight: bold;
}

.featured-desc {
  margin-bottom: 20px;
  line-height: 1.6;
  flex-grow: 1;
  color: var(--text-color);
}

.btn-primary {
  background-color: var(--primary-color);
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: var(--border-radius);
  font-weight: bold;
  display: inline-block;
  text-align: center;
  transition: var(--transition);
  border: none;
  cursor: pointer;
  align-self: flex-start;
}

.btn-primary:hover {
  background-color: var(--accent-color);
  transform: translateY(-2px);
}

.btn-outline {
  background-color: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  padding: 8px 20px;
  border-radius: var(--border-radius);
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  text-align: center;
  transition: var(--transition);
}

.btn-outline:hover {
  background-color: var(--primary-color);
  color: white;
}

/* 活动部分 */
.events-section {
  background-color: var(--light-color);
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
}

.event-card {
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  overflow: hidden;
  transition: var(--transition);
  border: 1px solid rgba(184, 134, 11, 0.2);
}

.event-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(139, 69, 19, 0.2);
  border-color: var(--primary-color);
}

.event-image {
  height: 200px;
  position: relative;
  overflow: hidden;
}

.event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.event-card:hover .event-image img {
  transform: scale(1.05);
}

.event-image .image-source {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  z-index: 2;
}

.event-content {
  padding: 20px;
}

.event-date {
  display: inline-block;
  background-color: var(--primary-color);
  color: white;
  padding: 5px 10px;
  border-radius: var(--border-radius);
  font-size: 0.8rem;
  margin-bottom: 15px;
}

.event-card h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: var(--accent-color);
}

.event-location {
  display: flex;
  align-items: center;
  color: var(--secondary-color);
  margin-top: 15px;
  font-size: 0.9rem;
}

.event-location .icon {
  margin-right: 5px;
}

/* 数据统计部分 */
.stats-section {
  background-color: var(--primary-color);
  color: white;
  padding: 60px 0;
  background-image: linear-gradient(to right, var(--primary-color), var(--accent-color));
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  text-align: center;
}

.stat-item {
  padding: 20px;
  position: relative;
}

.stat-item::after {
  content: '';
  position: absolute;
  right: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.3);
}

.stat-item:last-child::after {
  display: none;
}

.stat-number {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 10px;
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
}

.stat-title {
  font-size: 1.1rem;
}

/* 订阅部分 */
.subscribe-section {
  text-align: center;
}

.dunhuang-subscribe {
  background-color: var(--light-color);
  background-image: url('data:image/svg+xml;utf8,<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"><path d="M60 30L72 48H48L60 30Z M20 70L32 88H8L20 70Z M100 70L112 88H88L100 70Z" fill="%23B8860B" fill-opacity="0.1"/></svg>');
  background-size: 120px 120px;
}

.subscribe-content {
  max-width: 600px;
  margin: 0 auto;
  background-color: rgba(255, 248, 220, 0.8);
  padding: 30px;
  border-radius: 8px;
  border: 1px solid var(--primary-color);
}

.subscribe-content h2 {
  margin-bottom: 20px;
  color: var(--primary-color);
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
}

.subscribe-form {
  display: flex;
  margin-top: 30px;
  max-width: 500px;
  margin: 30px auto 0;
}

.subscribe-form input {
  flex: 1;
  padding: 12px 15px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  font-size: 1rem;
  background-color: white;
}

.subscribe-form button {
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.subscribe-message {
  margin-top: 15px;
  color: var(--success-color);
  font-weight: bold;
}

.home {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* 响应式调整 */
@media (max-width: 992px) {
  .featured-grid {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  }

  .featured-image {
    height: 280px;
  }
}

@media (max-width: 768px) {
  .hero-section {
    height: 60vh;
  }

  .hero-content h1 {
    font-size: 2rem;
  }

  .hero-content p {
    font-size: 1.1rem;
  }

  .image-source {
    font-size: 0.8rem;
    padding: 3px 8px;
  }

  .featured-grid {
    grid-template-columns: 1fr;
  }

  .featured-image {
    height: 250px;
  }

  .events-grid,
  .category-grid {
    grid-template-columns: 1fr;
  }

  .subscribe-form {
    flex-direction: column;
  }

  .subscribe-form input {
    border-radius: var(--border-radius);
    margin-bottom: 10px;
  }

  .subscribe-form button {
    border-radius: var(--border-radius);
  }

  .stat-item::after {
    display: none;
  }
}
</style>
